<template>
	<view>
		<!-- 切换tab -->
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					<view class="workimage">
						<image :src=item.Image mode=""></image>
					</view>
					<view class="">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 风险提示 -->
		<view class="huangsebox mainpadding">
			风险提示: 转拍属于C2C交易，资金不经过平台，平台不会自动扣款，需要您手动自行转账给对方，对方才能收到款项。
		</view>
		<view class="mainpadding">
			<!-- 微信 -->
			<view class="" v-if="isActive==0">
				<!-- 未上传 -->
				<view class="shbox" @click="uploadImg(1)">
					<u-icon name="camera-fill" color="#000" size="90" v-if="!wechat_image"></u-icon>
					<image class="shoukm" :src="wechat_image_text" mode="" v-if="wechat_image"></image>
				</view>
				<view class="flexcenter xiaohui margin_top1">上传收款码</view>
				<view class=" margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu" style="min-width: 160rpx;">短信验证码</view>
						<input type="number" class="textright" style="width: 100%;" placeholder="请输入短信验证码"
							v-model="wxcaptcha">
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="xiaolan textcenter" style="width: 180rpx;" @click="wxsendyzm" v-show="wxcodetext == 1">
						获取验证码</view>
					<view class="xiaolan textcenter" style="width: 180rpx;" v-show="wxcodetext == 2">{{wxsecond}}s后重新获取
					</view>
					<view class="xiaolan textcenter" style="width: 180rpx;" @click="wxsendyzm" v-show="wxcodetext == 3">
						重新发送</view>
				</view>
				<view class="bigbtn margin_top" @click="submit(1)">绑定</view>
				<!-- <view class="baibtn margin_top">删除</view> -->
			</view>
			<view class="" v-if="isActive==1">
				<!-- 未上传 -->
				<view class="shbox" @click="uploadImg(2)">
					<u-icon name="camera-fill" color="#000" size="90" v-if="!ali_image"></u-icon>
					<image class="shoukm" :src="ali_image_text" mode="" v-if="ali_image"></image>
				</view>
				<view class="flexcenter xiaohui margin_top1">上传收款码</view>
				<view class=" margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu" style="min-width: 160rpx;">短信验证码</view>
						<input type="number" class="textright" style="width: 100%;" placeholder="请输入短信验证码"
							v-model="zfbcaptcha">
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="xiaolan textcenter" style="width: 180rpx;" @click="zfbsendyzm"
						v-show="zfbcodetext == 1">获取验证码</view>
					<view class="xiaolan textcenter" style="width: 180rpx;" v-show="zfbcodetext == 2">
						{{zfbsecond}}s后重新获取</view>
					<view class="xiaolan textcenter" style="width: 180rpx;" @click="zfbsendyzm"
						v-show="zfbcodetext == 3">重新发送</view>
				</view>
				<view class="bigbtn margin_top" @click="submit(2)">绑定</view>
				<!-- <view class="baibtn margin_top">删除</view> -->
			</view>
			<!-- 银行卡 -->
			<view class="" v-if="isActive==2">
				<view class=" xiahuaxian margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu">姓名</view>
						<input type="text" placeholder="请输入您的姓名" v-model="bank_username">
					</view>
				</view>
				<view class="flexbetween xiahuaxian margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu">银行卡号</view>
						<input type="number" placeholder="请输入您的银行卡号" v-model="bank_no">
					</view>
					<view class="xiaolbtn1 titletext" v-if="bank_no" @click="copy(bank_no)">复制</view>
				</view>
				<view class=" xiahuaxian margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu">所属银行</view>
						<input type="text" placeholder="请输入您的所属银行" v-model="open_bank">
					</view>
				</view>
				<!-- <view class="flexbetween xiahuaxian margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu">手机号</view>
						<input type="number" placeholder="请输入您的手机号码">
					</view>
					<view class="xiaolbtn titletext">发送验证码</view>
				</view> -->
				<view class=" xiahuaxian margin_top">
					<view class="flexleft">
						<view class="xiaohei  titletext nofonweight kuandu">短信验证码</view>
						<input type="number" placeholder="请输入短信验证码" v-model="yhkcaptcha">
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="xiaolan textcenter" style="width: 180rpx;" @click="yhksendyzm"
						v-show="yhkcodetext == 1">获取验证码</view>
					<view class="xiaolan textcenter" style="width: 180rpx;" v-show="yhkcodetext == 2">
						{{yhksecond}}s后重新获取</view>
					<view class="xiaolan textcenter" style="width: 180rpx;" @click="yhksendyzm"
						v-show="yhkcodetext == 3">重新发送</view>
				</view>
				<view class="bigbtn margin_top" @click="submit(3)">绑定</view>
				<!-- <view class="baibtn margin_top">删除</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				isActive: 0,
				navList: [{
					index: 0,
					title: '微信',
					Image: require('../../static/image/sysem/weiixn.png'),
				}, {
					index: 1,
					title: "支付宝",
					Image: require('../../static/image/sysem/zfb.png'),
				}, {
					index: 2,
					title: "银行卡",
					Image: require('../../static/image/sysem/yhk.png'),
				}],
				mobile: "",
				ali_image: "",
				ali_image_text: "",
				wechat_image: "",
				wechat_image_text: "",

				// 验证码模块
				// 微信
				wxcodetext: 1,
				wxsecond: 59,
				wxcaptcha: "",
				// 支付宝
				zfbcodetext: 1,
				zfbsecond: 59,
				zfbcaptcha: "",
				// 银行卡
				yhkcodetext: 1,
				yhksecond: 59,
				yhkcaptcha: "",
				bank_username:"",
				bank_no:"",
				open_bank:"",
			}
		},
		onLoad() {
			this.userinfo()
		},
		methods: {
			userinfo() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					let data = res.data
					this.mobile = data.mobile
					this.ali_image = data.ali_image
					this.ali_image_text = data.ali_image_text
					this.wechat_image = data.wechat_image
					this.wechat_image_text = data.wechat_image_text
					this.bank_username = data.bank_username
					this.bank_no = data.bank_no
					this.open_bank = data.open_bank
					console.log(this.bank_username,this.open_bank);
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
					}
				});
			},
			submit(val){
				let url = "/api/user/editWechatInfo"
				let data = {
					captcha:this.wxcaptcha,
					wechat_image:this.wechat_image,
				}
				if(val==1){
					if(this.wxcaptcha==""){
						httpRequest.toast("请输入验证码")
						return false
					}
					if(this.wechat_image==""){
						httpRequest.toast("请上传微信收款码")
						return false
					}
				}
				if(val==2){
					if(this.zfbcaptcha==""){
						httpRequest.toast("请输入验证码")
						return false
					}
					if(this.ali_image==""){
						httpRequest.toast("请上传支付宝收款码")
						return false
					}
					url = "/api/user/editAliInfo"
					data = {
						captcha:this.zfbcaptcha,
						ali_image:this.ali_image,
					}
				}
				if(val==3){
					if(this.yhkcaptcha==""){
						httpRequest.toast("请输入验证码")
						return false
					}
					if(this.bank_username==""){
						httpRequest.toast("请请输入姓名")
						return false
					}
					if(this.bank_no==""){
						httpRequest.toast("请请输入银行卡号")
						return false
					}
					if(this.open_bank==""){
						httpRequest.toast("请请输入所属银行")
						return false
					}
					url = "/api/user/editBankInfo"
					data = {
						captcha:this.yhkcaptcha,
						bank_username:this.bank_username,
						bank_no:this.bank_no,
						open_bank:this.open_bank,
					}
				}
				httpRequest.request(url, 'GET', data).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			
			wxsendyzm() { //微信绑定发送验证码
				let _this = this;
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.mobile,
					event: 'wechatcer',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						_this.wxcodetext = 2;
						_this.wxsecond = 59;
						let timer = setInterval(function() {
							if (_this.wxsecond > 1) {
								_this.wxsecond;
							} else {
								clearInterval(timer);
								_this.wxcodetext = 3;
							}
						}, 1000)
						httpRequest.toast('发送成功')
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			zfbsendyzm() { //支付宝绑定发送验证码
				let _this = this;
				
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.mobile,
					event: 'zfbcer',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						_this.zfbcodetext = 2;
						_this.zfbsecond = 59;
						let timer = setInterval(function() {
							if (_this.zfbsecond > 1) {
								_this.zfbsecond;
							} else {
								clearInterval(timer);
								_this.zfbcodetext = 3;
							}
						}, 1000)
						httpRequest.toast('发送成功')
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			yhksendyzm() { //银行卡绑定发送验证码
				let _this = this;
				
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.mobile,
					event: 'bankcer',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						_this.yhkcodetext = 2;
						_this.yhksecond = 59;
						let timer = setInterval(function() {
							if (_this.yhksecond > 1) {
								_this.yhksecond;
							} else {
								clearInterval(timer);
								_this.yhkcodetext = 3;
							}
						}, 1000)
						httpRequest.toast('发送成功')
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			uploadImg(val) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {

						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], val)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], val)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, val) {
				let _this = this;
				httpRequest.uploadFile('/api/Common/upload', url).then(res => {
					let image_item = res.fullurl;
					if (val == 1) {
						this.wechat_image = res.url
						this.wechat_image_text = image_item
					}
					if (val == 2) {
						this.ali_image = res.url
						this.ali_image_text = image_item
						
					}
				}).catch(err => {});
			},
			checked(index) {
				this.isActive = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shoukm {
		width: 200rpx;
		height: 200rpx;
	}

	.kuandu {
		width: 160rpx;
	}

	.xiaolbtn1 {
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 55rpx;
		font-size: 30rpx;
		color: #3478f5;
		border-radius: 10rpx;
		border: 5rpx solid #3478f5;
	}

	.xiaolbtn {
		width: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		font-size: 30rpx;
		color: #3478f5;
		border-radius: 30rpx;
		border: 5rpx solid #3478f5;
	}

	.shbox {
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		height: 220rpx;
		border: 2rpx solid #1777fa;
	}

	.huangsebox {
		background-color: #f6dbac;
		color: #d79452;
		font-weight: bold;
		font-size: 32rpx;
	}

	.workimage {
		margin: auto;
		width: 60rpx;
		height: 60rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tab_nav {
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 128rpx;
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 5rpx;
		background-size: 100% 100%;
		background-color: #3478f5;
		left: 0rpx;
		right: 0rpx;
		bottom: 0;
		margin: auto;
	}
</style>